<!DOCTYPE html >
<html>
<head>
    <title>Pie Representation-Highcharts QBuilder</title>
    
    <script type="text/javascript" src="../../../libraries/jquery-1.6.2.min.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/highcharts.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/modules/exporting.js" ></script>
    <script type="text/javascript" src="../../../libraries/Highcharts/themes/gray.js"></script>

    <script type="text/javascript">
      var chart;
      $(document).ready(function() {
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container',
                  defaultSeriesType: 'column'
              },
              title: {
                  text: 'Nombre de commande par acheteur classer par categorie de produit'
              },
              credits: {
                  text: 'QueryBuilder'
              },
              xAxis: {
                  categories: ['albert', 'jim', 'joe', 'tom']
              },
              yAxis: {
                  min: 0,
                  title: {
                      text: 'Nombre de commande'
                  }
              },
              legend: {
                  layout: 'vertical',
                  backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF',
                  align: 'left',
                  verticalAlign: 'top',
                  x: 100,
                  y: 0,
                  floating: true,
                  shadow: true
              },
              tooltip: {
                  formatter: function() {
                      return ''+this.x +': '+ this.y +'';
                  }
              },
              plotOptions: {
                  column: {
                      pointPadding: 0.2,
                      borderWidth: 0
                  }
              },
              series: [{
                  name: 'stuff',
                  data: [126, 115, 104, 109]
              }, {
                  name: 'tool',
                  data: [123, 119, 101, 113]
              }, {
                  name: 'toy',
                  data: [120, 108, 101, 114]
              }]
          });
      });
    </script>

</head>
<body>
    <div id="container" style="height:410px; margin: 0 2em; min-width: 600px">
</body>
</html>
